<template>
  <PageWrapper contentFullHeight fixedHeight>
    <div class="stats-container">
      <div class="stat-card success-card">
        <div class="stat-icon success-icon">
          <Icon icon="ant-design:check-circle-filled" />
        </div>
        <div>
          <div class="stat-value success-value">{{ successCount }}</div>
          <div class="stat-label">发送成功总数</div>
        </div>
      </div>

      <div class="stat-card failure-card">
        <div class="stat-icon failure-icon">
          <Icon icon="ant-design:close-circle-filled" />
        </div>
        <div>
          <div class="stat-value failure-value">{{ failureCount }}</div>
          <div class="stat-label">发送失败总数</div>
        </div>
      </div>
    </div>
    <VxeBasicTable class="w-full h-full" ref="tableRef" v-bind="gridOptions">
    </VxeBasicTable>
  </PageWrapper>
</template>

<script lang="ts" setup>
import {ref, reactive, watch, onMounted} from 'vue';
  import { Icon } from '@gui-pkg/components';
  import { PageWrapper, BasicTableProps } from '@gui-pkg/antdcomponents';
  import { VxeBasicTable, VxeGridInstance } from '@gui-pkg/antdcomponents';
  import { columns, searchFormSchema } from './rain.data';
  import {getPhonePageApi,countBack} from "@/api/warningInfo/baseData";
  const tableRef = ref<VxeGridInstance>();
  const gridOptions = reactive<BasicTableProps>({
    id: tableRef.value,
    keepSource: true,
    editConfig: { trigger: 'click', mode: 'cell', showStatus: true },
    columns: columns,
    toolbarConfig: {
      className: "vxe-toolbarConfig",
    },
    formConfig: {
      enabled: true,
      className: "vxe-formConfig",
      items: searchFormSchema,
    },
    height: 'auto',
    proxyConfig: {
      ajax: {
        query: async ({ page, form }) => {
          const tableListData = await getPhonePageApi({
            pageNum: page.currentPage,
            pageSize: page.pageSize,
            phone:form.phone,
            beginTime:form.sendTime==null?"":form.sendTime[0],
            endTime:form.sendTime==null?"":form.sendTime[1],
          });
          console.log('tableListData',tableListData);
          return { list: tableListData.records,total: tableListData.total};
        },
      },
    },
  });

  const successCount = ref(null)
  const failureCount = ref(null)

    onMounted(async () => {
      const countData = await countBack();
      successCount.value = countData.sum2_success;
      failureCount.value = countData.sum2_fail;
    });
</script>

<style lang="less" scoped>
.stats-container {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
}

.stat-card {
  flex: 1;
  background: white;
  border-radius: 12px;
  padding: 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.success-card {
  border-top: 4px solid #10b981;
}

.failure-card {
  border-top: 4px solid #ef4444;
}

.stat-icon {
  font-size: 32px;
  margin-bottom: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.success-icon {
  background-color: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.failure-icon {
  background-color: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}

.success-value {
  color: #10b981;
}

.failure-value {
  color: #ef4444;
}

.stat-label {
  font-size: 16px;
  color: #64748b;
  font-weight: 500;
}
</style>
